<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>ECharts面积案例</title>
</head>
<style>
    #chart-1, #chart-2{
        width: 800px;
        height: 400px;
        display: inline-block;
    }
</style>
<body>
<div id="chart-1"></div>
<div id="chart-2"></div>
</body>
<script>
    echarts.init(document.getElementById("chart-1"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts面积案例'
        },
        grid: {
            top: 30,
            bottom: 0,
            left: 0,
            right: 0
        },
        xAxis: {
            type: 'category',
            show: false, // 隐藏x
            boundaryGap: false, // 去除边距
        },
        yAxis: {
            show: false,// 隐藏y
        },
        // 单个图标展示样式
        series: {
            type: 'line',
            data: [50, 150, 100, 120, 90, 150, 100, 120, 90, 150],
            areaStyle: { // 面积
                color: 'purple'
            },
            lineStyle: { // 去掉线段
                width: 0
            },
            itemStyle: { // 去掉小点
                opacity: 0
            },
            smooth: true // 平滑展示面积
        }
    })

    echarts.init(document.getElementById("chart-2"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts面积案例'
        },
        xAxis: {
            type: 'category',
            show: false, // 隐藏x
            boundaryGap: false, // 去除边距
        },
        yAxis: {
            show: false,// 隐藏y
        },
        // 单个图标展示样式
        series: {
            type: 'line',
            data: [50, 150, 100, 120, 90, 150, 100, 120, 90, 150],
            areaStyle: { // 面积
                color: 'purple'
            },
            lineStyle: { // 去掉线段
                width: 3,
                color:'#f50'
            },
            itemStyle: { // 去掉小点
                opacity: 0
            },
            smooth: true // 平滑展示面积
        }
    })
</script>
</html>
